<template>
  <div class="problem-detail">
    <el-row :gutter="60">
      <el-col :span="16">
        <problem-detail-info :model="problemModel"/>
      </el-col>
      <el-col :span="8">
        <problem-detail-params :model="problemModel"/>
        <problem-buttons :problem-id="problemModel.problemId"
                         :contest-id="contestModel===null?-1:contestModel.contestId"/>
      </el-col>
    </el-row>
    <SubmitDialog
        title="Upload Submission"
        uploadUrl="uploadSubmission"
        redirectPath="submission-list"
    />
  </div>
</template>

<script>
import SubmitDialog from "components/SubmitDialog";
import ProblemDetailParams from "./ProblemDetailParams";
import ProblemDetailInfo from "./ProblemDetailInfo"
import ProblemButtons from "@/components/content/problemDetail/ProblemButtons";


export default {
  components: {ProblemButtons, ProblemDetailParams, ProblemDetailInfo, SubmitDialog},
  props: {
    problemModel: {
      type: Object,
      default() {
        return {};
      }
    },
    contestModel: {
      type: Object,
      default() {
        return null;
      }
    }
  },
  data: function () {
    return {
      modalVisible: false
    };
  },
  methods: {
    handleSubmit: function () {
      this.modalVisible = true;
    },
    goSubmissions: function () {
      let pid = this.$route.params.problemId;
      this.$router.push({
        name: "submissionList",
        query: {
          problemId: pid
        }
      });
    },
    handleSummary: function () {
      let pid = this.$route.params.problemId;
      this.$router.push({
        name: "problem-summary",
        params: {problemId: pid}
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.problem-detail {
  max-width: 1200px;
  margin: 20px auto auto;

  h1,
  h2 {
    color: #337ab7;
  }

  .description,
  .input,
  .output,
  .source,
  .hint {
    font-size: 15px;
  }

  .input-sample,
  .output-sample {
    pre {
      margin: 0px;
      display: block;
      padding: 10px;
      font-size: 14px;
      line-height: 1.5;
      border: 1px solid #eaeefb;
      background-color: #fafafa;
      color: #333;
      border-radius: 4px;
      font-family: Menlo, Monaco, Consolas, monospace;
    }
  }

  .sidebar {
    span {
      font-size: 12px;
    }

    .divider {
      border-bottom: 1px dotted #e9eaec;
      margin-bottom: 15px;
    }
  }
}
</style>
